import React, {Component} from 'react';
import {View, Image,Text,Center} from 'native-base'
import {StyleSheet,ScrollView} from 'react-native';
class Scattered extends Component {
    state={
        search_word:'人',
        compile:{
            isBook:[],
            laiyuan:[],
            length:'',
            name:[],
            niandai:[],
            photo1:[],
            photo2:[],
            zuozhe:[],
        }
    }
    constructor(props) {
        super(props);
    }
    _contentViewScroll(e){
        var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
        var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
        var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度
        if (offsetY + oriageScrollHeight >= contentSizeHeight){
            console.log('上传滑动到底部事件')
        }
    }
    componentDidMount() {
        fetch(`https://www.guyinbaike.com/apiSearchYintui?search_word=${this.state.search_word}`, {
            method: 'GET',
            headers: {
                'Accept-Encoding': 'gzip',
            },
        })
            .then(response => {
                return response.json();
            })
            .then(data => {
                this.setState({
                    compile:{
                        isBook:data.isBook,
                        laiyuan:data.laiyuan,
                        name:data.name,
                        niandai:data.niandai,
                        photo1:data.photo1,
                        photo2:data.photo2,
                        zuozhe:data.zuozhe,
                    }
                })
                // console.log(data.isBook)
                // console.log(data.laiyuan)
                // console.log(data.length)
                // console.log(data.name)
                // console.log(data.niandai)
                // console.log(data.photo1)
                // console.log(data.photo2)
                // console.log(data.zuozhe)
            })
        .catch(err => {
            console.log(err.toString());
        });
    }

    render() {
        return (
            <ScrollView onMomentumScrollEnd={this._contentViewScroll}>
                <View style={styles.contentVessels}>
                    {this.state.compile.laiyuan.map((item, index) => {
                        return (
                            this.state.compile.isBook[index]!=="1"&&<View key={index} style={styles.content}>
                                <View>
                                    <View style={styles.imgVessels}>
                                        <Image source={{uri: this.state.compile.photo1[index], isStatic: true}} alt="图片错误" style={styles.img}/>
                                    </View>
                                    <Center _text={{fontSize:18}}>{this.state.compile.name[index]}</Center>
                                    <Center _text={{color:'#c4c4c4',fontSize:12}}>{this.state.compile.laiyuan[index]}</Center>
                                </View>
                            </View>
                        )
                    })}
                </View>
            </ScrollView>
        );
    }
}

export default Scattered;

const styles=StyleSheet.create({
    contentVessels:{
        backgroundColor: '#fff',
        width: '100%',
        // paddingLeft: 20,
        // paddingRight: 20,
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginTop: 20,
    },
    content:{
        backgroundColor: '#fff',
        height: 150,
        width: '47%',
        borderRadius: 10,
        marginBottom:20
    },
    imgVessels:{
        width:'100%',
        height: 120,
        backgroundColor:'#f2f2f2',
        borderRadius: 3,
        // padding:10
    },
    img:{
        width:'100%',
        height:'100%',
        backgroundPosition:'center',
        backgroundSize:'over'
    }
})